<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }
  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cells {
    margin-top: 0;
  }
  .weui-cells_form {
    background: #fbfbfb;
  }
  .weui-cell {
    background: #fff;
  }
  .weui-cells__title {
    text-align: left;
  }
  .oitem {
    padding: 3px;
  }
  .hide {
    display: none;
  }
  #acts {
    font-size: 0;
  }
  #acts span {
    font-size: 14px;
  }
  .halfbtn {
    display: inline-block;
    width: 49%;
  }
  .weui-label {
    text-align: left;
  }

  .weui_uploader_input_wrp {
    float: left;
    position: relative;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 77px;
    height: 77px;
    border: 1px solid #D9D9D9;
  }
  .weui_uploader_hd {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
  }
  .weui_uploader_files {
    list-style: none;
  }
  .weui_uploader_input_wrp:before {
    width: 2px;
    height: 39.5px;
  }
  .weui_uploader_input_wrp:before, .weui_uploader_input_wrp:after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #D9D9D9;
  }
  .weui_uploader_input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .weui_uploader_input_wrp:after {
    width: 39.5px;
    height: 2px;
  }
  .weui_uploader_bd {
    overflow: hidden;
  }
  .weui_cell {
    padding: 10px 15px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff;
  }
  .producedata >>> .weui-uploader_files {
    list-style: none;
    overflow-y: hidden;
  }
  .producedata >>> .weui-uploader_file {
    float: left;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 79px;
    background: no-repeat 50%;
    background-size: cover;
  }
  .weui-cell_select {
    padding: 0 15px;
  }
  .rj-topbar {
    height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative
  }
  .list {
    background: #eee;
  }
  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui_navbar_item {
    font-size: 14px;
  }
  .weui_navbar_item.weui_bar_item_on {
    color: #3cc51f;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .list {
    overflow: auto;
  }
  .rj-cell {
    display: inline-block;
    font-size: 0;
    padding: 5px 15px;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
  }
  .rj-cell span {
    padding-left: 5px;
    font-size: 14px;
    color: #333;
  }
  .weui-cells {
    margin-top: 0;
  }
  .addfcdata {
    background: #eee;
    overflow:auto;overflow-x: hidden
  }
  .rj-cont {
    background: #fff;
  }
  /*.weui-select {*/
  /*  width: 28%;*/
  /*  height: auto;*/
  /*  line-height: normal;*/
  /*}*/
  input.time {
    border: none;
    font-size: 16px;
    text-align: left;
    padding-left: 15px;
  }
  .weui-select {
    height: auto;
    line-height: normal;
  }
  .weui-cell__bd.font0 {
    font-size: 0;
  }
  .weui-input.initem {
    width: 58%;
    display: inline-block;
    font-size: 16px;
  }
  .weui-input.initem.w38 {
    width: 38%;
  }
  .weui-input.initem.w30 {
    width: 34%;
  }
  .weui-input.initem.w18 {
    width: 21%;
  }
  .weui-input.initem.right {
    text-align: right;
  }
  .weui-panel__hd {
    padding: 10px 15px;
    text-align: left;
  }
  .weui-label {
    width: 125px;
  }
  .absbtn {
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .weui-btn_mini {
    padding: 0 0.8em;
  }
  .initem.font14 {
    font-size: 14px;
  }
</style>
<template>
  <div class="addfcdata">
    <div  style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      {{title}}
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="../../assets/back.png" style="width: 20px" />
      </a>
    </div>
    <p class="absbtn"><a href="javascript:;" class="weui-btn weui-btn_mini" :class="last ? 'weui-btn_default' : 'weui-btn_primary'" @click="showLast">历史数据</a></p>
    <div class="weui-cell rj-cont">
      <div class="weui-cell__hd">
        <label class="weui-label">生产计划</label>
      </div>
      <div class="weui-cell__bd">
        <select class="weui-select" name="plan" v-model="planid">
          <option value="" disabled>请选择生产计划</option>
          <option selected=""  v-for="(item, index) in produceplans" :key="item.guid" :value="item.guid" :data-date="item.planstart">{{item.name}} [{{item.planstart}}]</option>
        </select>
      </div>
    </div>
<!--    <div class="weui-cell rj-cont" v-show="isPackage">-->
<!--      <div class="weui-cell__hd">-->
<!--        <label class="weui-label">开始日期</label>-->
<!--      </div>-->
<!--      <div class="weui-cell__bd">-->
<!--        <input class="weui-input weight" type="text" name="" disabled :value="plandate" />-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="weui-cell rj-cont" v-show="!isPackage && !isDayworker">-->
<!--      <div class="weui-cell__hd">-->
<!--        <label class="weui-label">部门</label>-->
<!--      </div>-->
<!--      <div class="weui-cell__bd">-->
<!--        <select class="weui-select" name="" v-model="departid">-->
<!--          <option value="">请选择部门</option>-->
<!--          <option selected=""  v-for="(item, index) in producedeparts" :key="item.guid" :value="item.guid">{{item.name}}</option>-->
<!--        </select>-->
<!--      </div>-->
<!--    </div>-->
    <div class="weui-cell rj-cont">
      <div class="weui-cell__hd">
        <label class="weui-label">班组</label>
      </div>
      <div class="weui-cell__bd">
        <select class="weui-select" name="" v-model="departid">
          <option value="" disabled>请选择班组</option>
          <option selected=""  v-for="(item, index) in producedeparts" :key="item.guid" :value="item.guid">{{item.name}}</option>
        </select>
      </div>
    </div>
    <!--<div class="weui-cell rj-cont">
      <div class="weui-cell__hd">
        <label class="weui-label">日期</label>
      </div>
      <div class="weui-cell__bd">
        <input type="text" id='datetime-picker' class="time" name="createdate" v-model="createdate" placeholder="请选择日期" />
      </div>
    </div>-->
    <div class="weui-panel__hd" v-if="items.length > 0" style="padding: 0;">
      <div class="weui-cell" style="background: #eee">
        <div class="weui-cell__hd">
          <label class="weui-label">名称</label>
        </div>
        <div class="weui-cell__bd font0">
          <div class="weui-input initem font14" style="text-align: center;width: 40%">单价 (元)</div>
          <div class="weui-input initem right font14" style="width: 30%">日用量</div>
          <div class="weui-input initem right font14" style="width: 30%">损耗</div>
        </div>
      </div>
    </div>
    <div class="weui-cells weui-cells_form" v-if="items.length > 0">
      <form action="" method="post" id="formid">
        <div class="cellgroup">
          <template v-for="(item, index) in items">
            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">{{item.name}} ({{item.rate}})</label></div>
              <div class="weui-cell__bd font0">
                <input class="weui-input initem" style="width: 40%;text-align: center;" type="number" :name="'itemsdata[' + index + '].price'" :value="item.price" :readonly="item.pricetype == 1" placeholder="单价" />
                <input class="weui-input initem right" style="width: 30%;" type="number" :name="'itemsdata[' + index + '].dosage'" :value="item.dosage" placeholder="日用量" />
                <input class="weui-input initem right" style="width: 30%;" type="number" :name="'itemsdata[' + index + '].loss'" :value="item.loss" placeholder="损耗" />
                <input class="weui-input initem" type="hidden" :name="'itemsdata[' + index + '].categorycode'" :value="code" />
                <input class="weui-input initem" type="hidden" :name="'itemsdata[' + index + '].dataitemid'" :value="item.guid" />
                <input class="weui-input initem" type="hidden" :name="'itemsdata[' + index + '].planid'" :value="planid" />
                <input class="weui-input initem" type="hidden" :name="'itemsdata[' + index + '].departid'" :value="departid" />
                <input class="weui-input initem" type="hidden" :name="'itemsdata[' + index + '].guid'" :value="item.dataguid" />
              </div>
            </div>
          </template>
        </div>
        <div class="weui-btn-area" v-if="items.length > 0">
          <a class="weui-btn weui-btn_primary halfbtn subbtn"  href="javascript:" @click="postForm">提交</a>
          <a class="weui-btn weui-btn_primary halfbtn"  href="javascript:" @click="$router.back(-1)" id="sub">返回</a>
        </div>
      </form>
    </div>

  </div>
</template>

<script>
export default {
  name: 'AddFirstcostData',
  data () {
    return {
      openid: localStorage.openid,
      code: '',
      type: 0,
      produceplans: [],
      plandate: '',
      producedeparts: [],
      planid: '',
      departid: '',
      createdate: '',
      items: [],
      title: '',
      last: false
    }
  },
  mounted () {
    this.code = this.$route.query.code;
    this.type = this.$route.query.type;
    this.title = this.$route.query.title + '录入';
    this.getProductplan();
    $("#datetime-picker").calendar();

    let that = this;
    $("#datetime-picker").change(function () {
      that.createdate = $(this).val().replace(/\//g, '-');
      that.getItems();
    })
  },
  computed: {
    isPackage: function () {
      return this.code.substring(0, 3) == '003' ? true : false;
    }
  },
  watch: {
    'planid': function (val) {
      this.getItems();
      this.plandate = $('select[name="plan"]').find('option:selected').data('date');
    },
    'departid': function (val) {
      this.getItems();
    },
  },
  methods: {
    showLast: function () {
      this.last = !this.last;
      if (this.last) {
        this.getLastItems();
      } else {
        this.getItems();
      }
    },
    getProductplan: function() {
      this.axios({
        method: 'get',
        url: '/produce/Produceplan!getPlans.action',
        params: {openid: this.openid, status: 3}
      }).then(response => {
        if (response.data.status == 'true') {
          this.produceplans = response.data.plans;
          this.planid = response.data.plans[0].guid;
          this.getDeps();
          this.producedeparts = response.data.departs;
          this.departid = response.data.departs[0].guid;
        } else if (response.data.status == 'false') {
          this.toastText(response.data.result);
        } else {
          this.toastError('系统错误');
        }
      });
    },
    getDeps: function() {
      this.axios({
        method: 'get',
        url: '/produce/Produceplan!getDeps.action',
        params: {openid: this.openid, planid: this.planid}
      }).then(response => {
        if (response.data.status == 'true') {
          this.producedeparts = response.data.departs;
          this.departid = response.data.departs[0].guid;
        } else if (response.data.status == 'false') {
          this.toastText(response.data.result);
        } else {
          this.toastError('系统错误');
        }
      });
    },
    getItems: function() {
      this.axios({
        method: 'get',
        url: '/produce/Costregister!getItems.action',
        params: {openid: this.openid, planguid: this.planid, categorycode: this.code, departguid: this.departid}
      }).then(response => {
        if (response.data.status == 'true') {
          this.items = response.data.items;
          this.standardcode = response.data.items[0].code;
        } else if (response.data.status == 'false') {
          this.toastText(response.data.result);
        } else {
          this.toastError('系统错误');
        }
      });
    },
    getLastItems: function() {
      this.axios({
        method: 'get',
        url: '/produce/Costregister!getHistoryData.action',
        params: {openid: this.openid, departguid: this.departid, categorycode: this.code, code: this.standardcode}
      }).then(response => {
        if (response.data.status == 'true') {
          this.items = response.data.itemsdata;
        } else if (response.data.status == 'false') {
          this.toastText(response.data.result);
        } else {
          this.toastError('系统错误');
        }
      });
    },
    postForm: function () {
      // if (!this.checkEmy('opinion')) {
      //   this.toastError('意见不能为空！');
      //   return false;
      // }
      //防止重复提交
      $('.subbtn').attr("disabled",true).css("pointer-events","none");

      let postData = this.serialize2Obj($("#formid").serializeArray());
      postData.datatype = this.type;
      this.axios({
        method: 'post',
        url: '/produce/Costregister!saveAndUpdate.action?openid=' + this.openid,
        params: postData
      }).then(response => {
        //恢复提交按钮可点击
        $('.subbtn').attr('disabled', false).css("pointer-events","auto");

        if (response.data.status == 'true') {
          this.toastSuccess('提交成功!');
          //this.$router.push({name: 'AddCostPriceGuide'});
          this.$router.back(-1);
        } else if (response.data.status == 'false') {
          this.toastText(response.data.result);
        } else {
          this.toastError('系统错误');
        }
      }).catch(function (error) {
        //恢复提交按钮可点击
        $('.subbtn').attr('disabled', false).css("pointer-events","auto");
        this.toastError('系统错误');
      });
    }
}
}
</script>
